<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>1-异步编程问题与Promise概述-fixed</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style></style>
  </head>
  <body>
    <div id="app"></div>
    <script>
      // 1： 传统的请求数据方式，数据返回来的顺序是 2 1 3， 不是1 2 3， 会乱，不好控制
      // $.ajax({
      //   url: 'http://www.localhost:3000/data',
      //   success: function (data) {
      //     console.log(data); //2:Hello Data
      //   },
      // });
      // $.ajax({
      //   url: 'http://www.localhost:3000/data1',
      //   success: function (data) {
      //     console.log(data); //3:Hello Data1
      //   },
      // });
      // $.ajax({
      //   url: 'http://www.localhost:3000/data2',
      //   success: function (data) {
      //     console.log(data); //1: Hello Data2
      //   },
      // });

      //  =======================================================方式二：回调地狱
      // 打印回来的顺序是 1 2 3， 但是回调地狱，层层嵌套。难以维护
      $.ajax({
        url: 'http://www.localhost:3000/data',
        success: function (data) {
          console.log(data);
          $.ajax({
            url: 'http://www.localhost:3000/data1',
            success: function (data) {
              console.log(data);
              $.ajax({
                url: 'http://www.localhost:3000/data2',
                success: function (data) {
                  console.log(data);
                },
              });
            },
          });
        },
      });
    </script>
  </body>
</html>
